<template>
  <div class="desktop" :style="{ height: `${height}px` }">
    <div class="flex-1 h-100 flex flex-col">
      <Toolbar />
      <Apps />
      <Missions />
    </div>
    <Background></Background>
    <!--  -->
    <div class="windows">
      <Draggable
        v-for="item in windowList"
        :key="item.id"
        v-show="!item.hidden"
        :id="item.id"
        @close="closeWindow(item.id || '')"
        v-bind="item"
      >
        <Animation
          appear
          enter-active-class="animate__animated animate__fadeIn"
          leave-active-class="animate__animated animate__fadeOut"
        >
          <component :data="item.data" :id="item.id" :is="item.component"></component>
        </Animation>
      </Draggable>
    </div>
  </div>
</template>

<script setup lang="ts">
import Apps from './apps/Apps.vue';
import Background from './background/Background.vue';
import Missions from './missions/Missions.vue';
import Toolbar from './toolbar/Toolbar.vue';

import { closeWindow, windowList } from '@/global/window/window';

import { openLogin } from '@/global/window/widget';
import { getToken } from '@/store/user/utils';
import Draggable from '../../views/components/draggable/Draggable.vue';
import { getUserRouters } from './apps/data';
const height = ref(innerHeight);
onMounted(() => {
  if (!getToken()) {
    openLogin();
  } else {
    getUserRouters();
  }
});
const onResize = () => {
  height.value = innerHeight;
};
addEventListener('resize', onResize);
</script>

<style lang="scss" scoped>
.desktop {
  position: relative;
  overflow: hidden;
}
.windows {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
}
@media screen and (max-width: 700px) {
  .desktop {
    display: none;
  }
}
</style>
